昨天那篇提到了 WebGL 的 pipeline
若將其中的步驟視覺化，則大概可以簡單想像成：

• 定義要渲染的點的位置
• 然後再將點裡面填滿
  (如上圖)

整個 WebGL 的 pipeline 看起來複雜，
但實際上會寫到 Shader 的部分只有
Vertex Shader 與 Fragment Shader

一開始會遇到的問題：

所以要寫的是哪個 Shader 啊?

回到上圖的示意來看的話，

• 定義要渲染的點的位置的是 Vertex Shader
• 將點裡填滿的是 Fragment Shader

我選擇先玩玩看 Fragment Shader，
如果 Vertex Shader 定義在整個畫面的四角
那麼寫 Fragment Shader，就是寫全畫面的濾鏡效果了

回到先前提到 ASCII 濾鏡的網站：

似乎就專注在寫 Fragment Shader 就好了 !?
(好像懂了什麼)
接下來的文章，會沿著這個方向開始討論起

Shadertoy BETA

Shader 的實作會在 Shadertoy BETA 上
可想像成是練習寫 Shader 的 CodePen

新建專案時，會看到畫面上的漸層動態，程式碼也只有幾行

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Time varying pixel color
    vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));

    // Output to screen
    fragColor = vec4(col,1.0);
}

實際上生成動態的是這行：

vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));

好像漸漸抓到要寫的是什麼了，
後續文章讓我們繼續看下去

在 Shadertoy Beta 上完成之後？

如果在 shadertoy 完成濾鏡的效果後，
再接回 PixiJS 與 three.js 的濾鏡寫法
可能會在 JS 上遇到一些問題，
但由於 Shader 語法上在 shadertoy 上沒問題
PixiJS 與 three.js 也有濾鏡寫法可以參考

比較容易除錯